import {
  Input,
  Space,
  Descriptions,
  Pagination,
  message,
  Card,
  Button
} from "antd";
import React from "react";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import styles from "./style.less";
import {
  SwapOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from "@ant-design/icons";
import icon from "../../assets/images/admob.png";
const { Search } = Input;

const sortList = ["发布日期", "点击量"];
const typeList = [
  {
    id: 1,
    name: "全部"
  },
  {
    id: 2,
    name: "科学院"
  },
  {
    id: 3,
    name: "研究院"
  }
];
@connect(({global})=>({userId: global.userId}))
class SpecialSubject extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      typeIndex: -1,
      sortIndex: -1,
      pageSize: 5,
      pageNum: 0,
      specialSList: [],
      total: 0,
      name: "",
      timeCount: 2,
      inputValue: "",
      isShow: -1,
      showIcon: false,
      show: <ArrowUpOutlined />
    };
  }
  //请求接口
  componentDidMount = () => {
    // console.log(123,this.props.location.search)
    // let now_page_no = this.props.match.now_page_no ? this.props.match.now_page_no : 0
    // this.selectByPage(now_page_no);
    this.selectByPage();
  };
  selectByPage = () => {
    let { pageSize, pageNum, name, timeCount } = this.state;
    this.props
      .dispatch({
        type: "global/selectByPage",
        payload: {
          pageSize: pageSize,
          pageNum: pageNum === 0 ? 1 : pageNum,
          name: name,
          timeCount: timeCount
        }
      })
      .then(res => {
        console.log(res.data.rows);
        if (res && res.data.rows.length > 0) {
          this.setState({
            specialSList: res.data.rows,
            total: res.data.total
          });
        } else {
          this.setState({
            specialSList: res.data.rows,
            total: res.data.total
          });
        }
      });
  };
  //分页
  pageChange = (page, pageSize) => {
    console.log(page, pageSize);
    this.setState({ pageSize: pageSize, pageNum: page }, () => {
      this.selectByPage();
    });
  };
  pageSizeChange = (current, size) => {
    console.log(current, size);
    this.setState({ pageSize: size, pageNum: 1 }, () => {
      this.selectByPage();
    });
  };
  //搜索
  onSearch = value => {
    console.log(value);
    this.setState(
      {
        name: value,
        pageNum: 1
      },
      () => {
        this.selectByPage();
      }
    );
  };
  inputChange = e => {
    this.setState({
      inputValue: e.target.value
    });
  };
  getClear = () => {
    this.setState({
      inputValue: ""
    });
  };
  handleSortChange = e => {
    this.setState(
      {
        sortIndex: Number(e.target.getAttribute("data-index")),
        showIcon: true,
        pageNum: 1
      },
      () => {
        console.log("1111222", this.state.sortIndex);
        if (this.state.sortIndex === 0) {
          if (this.state.timeCount === 3) {
            this.setState(
              {
                timeCount: 0,
                show: <ArrowDownOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 1) {
            this.setState(
              {
                timeCount: 0,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 2) {
            this.setState(
              {
                timeCount: 0,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 4) {
            this.setState(
              {
                timeCount: 0,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 0) {
            this.setState(
              {
                timeCount: 3,
                show: <ArrowDownOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          }
        }
        if (this.state.sortIndex === 1) {
          if (this.state.timeCount === 2) {
            this.setState(
              {
                timeCount: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 1) {
            this.setState(
              {
                timeCount: 4,
                show: <ArrowDownOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 2) {
            this.setState(
              {
                timeCount: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 3) {
            this.setState(
              {
                timeCount: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          } else if (this.state.timeCount === 4) {
            this.setState(
              {
                timeCount: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.selectByPage();
              }
            );
          }
        }
      }
    );
  };
  handleTypeChange = e => {
    this.setState({
      typeIndex: Number(e.target.getAttribute("data-index"))
    });
  };

  handleToDetaile = id => {
    console.log(id);
    // 缓存当前页码
    let now_page_no = this.state.pageNum
    localStorage.setItem('now_page_no',now_page_no)
    // this.props.dispatch(
    //   routerRedux.push({
    //     pathname: `/specialSubjectDetail/${id}?${Number(now_page_no)}`, //传递当前页码
    //     state: {}
    //   })
    // );
    window.open( window.BASE_URL + `/specialSubjectDetail/${id}`)
  };

  render() {
    const {
      typeIndex,
      sortIndex,
      pageNum,
      isShow,
      showIcon,
      show
    } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>专题</p>
            <p>Special subject</p>
          </div>
        </div>
        <div className={styles.researchDataBody}>
          <div className={styles.researchDataSearch}>
            <Search
              placeholder="请输入关键字"
              onSearch={this.onSearch}
              onChange={e => this.inputChange(e)}
              value={this.state.inputValue}
            />
            <Button onClick={this.getClear}>清空</Button>
          </div>
          <div className={styles.sortBox}>
            <Space>
              {sortList.map((item, index) => {
                return (
                  <div
                    key={index}
                    data-index={index}
                    className={
                      sortIndex === index
                        ? `${styles.active} ${styles.sortBtn}`
                        : `${styles.sortBtn}`
                    }
                    onClick={e => this.handleSortChange(e)}
                  >
                    {item}
                    <span style={{ display: showIcon ? "block" : "none" }}>
                      <span
                        style={{
                          display: sortIndex === index ? "block" : "none",
                          paddingLeft: "73px",
                          marginTop: "-29px"
                        }}
                      >
                        {show}
                      </span>
                    </span>
                  </div>
                );
              })}
            </Space>
            <div className={styles.fr}>
              <p>
                共检索到<span className={styles.num}>{this.state.total}</span>
                个项目
              </p>
            </div>
          </div>
          <div className={styles.listBox}>
            {this.state.specialSList.map((item, index) => {
              return (
                <div
                  key={index}
                  className={styles.descriptionsBox}
                  style={{ marginBottom: "2%" }}
                >
                  <div className={styles.descriptionsHead}>
                    <div className={styles.clearfix}>
                      <div className={styles.fl}>
                        <div className={styles.descriptionsIcon}>
                          {item.logo !== "" ? (
                            <img
                              src={item.logo}
                              alt=""
                              style={{ width: "100%", height: "100%" }}
                            />
                          ) : (
                            <div>{item.name.charAt(0)}</div>
                          )}
                        </div>
                      </div>
                      <div
                        className={styles.fl}
                        style={{ width: "calc(100% - 95px)" }}
                      >
                        <div className={styles.descriptionsTitle}>
                          <p
                            onClick={() => this.handleToDetaile(item.id)}
                            style={{ cursor: "pointer" }}
                          >
                            {item.name}
                          </p>
                          <span onClick={() => this.handleToDetaile(item.id)}>
                            进入专题
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={styles.descriptionsBody}>
                    <Descriptions column={2}>
                      <Descriptions.Item label="专题点击量">
                        {item.visitNum}
                      </Descriptions.Item>
                      <Descriptions.Item label="科研数据数">
                        {item.dataNumber}
                      </Descriptions.Item>
                      <Descriptions.Item label="科研软件数">
                        {item.knowledgeTitleNumber}
                      </Descriptions.Item>
                      <Descriptions.Item label="发布时间">
                        {item.createTime}
                      </Descriptions.Item>
                      <Descriptions.Item label="专题描述" span={2}>
                        {item.introduction}
                      </Descriptions.Item>
                      <Descriptions.Item label="关键词" span={2}>
                        <Space className={styles.keyWords}>
                          {item.tags.split(/[,，、 ]/).map((keyname, index) => {
                            return <span key={index}>{keyname}</span>;
                          })}
                        </Space>
                      </Descriptions.Item>
                      <Descriptions.Item label="科研数据">
                        <Space className={styles.ulList}>
                          <ul>
                            {item.titles.map((item, index) => {
                              if(index<5){
                                return <li key={index}>{item}</li>;
                              }else{
                                return null
                              }
                            })}
                          </ul>
                        </Space>
                      </Descriptions.Item>
                      <Descriptions.Item label="科研软件">
                        <Space className={styles.ulList}>
                          <ul>
                            {item.knowledgeTitle &&
                              item.knowledgeTitle.map((item1, index1) => {
                                if(index<5){
                                  return <li key={index1}>{item1}</li>;
                                }else{
                                  return null
                                }
                              })}
                          </ul>
                        </Space>
                      </Descriptions.Item>
                    </Descriptions>
                  </div>
                </div>
              );
            })}
            <div className={styles.pagination}>
              <Pagination
                total={this.state.total}
                showSizeChanger
                showQuickJumper
                current={pageNum === 0 ? 1 : pageNum}
                defaultCurrent={1}
                defaultPageSize={5}
                pageSizeOptions={[5, 10, 20, 50]}
                showTotal={total => `共 ${total} 条`}
                onChange={this.pageChange}
                onShowSizeChange={this.pageSizeChange}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SpecialSubject;
